<template>
  <div class="bodyBox">
    <div class="leftBox"></div>
    <div class="rightBox">
      <div class="rightBoxT">
        <div class="loginBox">

        </div>
        <div class="textBox">
                        <span>
                            设备管理系统
                        </span>
        </div>
      </div>
      <div class="rightBoxB">
        <!--<div class="inputBox">-->
        <!--<div class="inputBoxIcon"></div>-->
        <!--<input type="text" id="username" name="username" v-model="username" placeholder="请输入账号">-->
        <!--</div>-->
        <div class="modal-body">
          <!-- 多输入表单 -->
          <el-form ref="joinForm" :model="userData" :rules="formRules" label-width="80px">
            <!--<el-form-item label="查房号" prop="roomId">-->
            <!--<el-input :model="userData.roomId"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="用户名" prop="username">-->
            <!--<el-input v-model="userData.username"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="密码" prop="pwd">-->
            <!--<el-input type="password" v-model="userData.pwd"></el-input>-->
            <!--</el-form-item>-->
            <div class="inputBox">
              <div class="inputBoxIcon1"></div>
              <input type="text" id="username" name="username" v-model="userData.username"
                     placeholder="请输入账号">
            </div>
            <div class="inputBox">
              <div class="inputBoxIcon2"></div>
              <input type="password" id="pwd" name="pwd" v-model="userData.pwd"
                     placeholder="请输入密码">
            </div>
          </el-form>

          <div class="isBox">
            <el-switch  v-model="userData.delivery"></el-switch>
            <span class="textSpan">记住密码</span>

          </div>

        </div>
        <div class="modal-footer">

          <button type="primary"  @click="validateAndJoin">立即登入</button>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  import {hasAll,Login} from '../../api/adminuser'
  import cookie from '../../utils/cookie'
  import { getToken, setToken, removeToken } from '@/utils/auth'
  import { mapGetters } from 'vuex'
  export default {
    name:'Logn',
    data: function () {
      return {

        isSave:false,
        userData: {
          roomId:'999999999',
          username:'',
          pwd:'',
          delivery: false,
        },
        formRules: { // 表单验证规则
          roomId: [
            {required: true, message: '会议号不能为空', trigger: 'blur'},
            {pattern: /^[1-9][0-9]{8}$/, message: '请输入正数且长度为9位的纯数字', trigger: 'blur'}
          ],
          roomName: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ]
        },
        redirect: undefined,


      }
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      validateAndJoin: function () {
        console.log('in to validateAndJoin');

        this.$refs.joinForm.validate((valid) => {
          if (valid) {
            console.log(this.userData);
            let da = {
              username: this.userData.username,
              password: this.userData.pwd
            }
            if (this.userData.delivery) {
              let jsonString = JSON.stringify(this.userData);
              console.log('jsonString', jsonString);
              cookie.setCookie("loginMsg", jsonString, 365)
            } else {
              cookie.deleteCookie("loginMsg")
            }
            // Login(da).then( (res) => {
            //   console.log('AdminUsersAPI.login', res);
            //   console.log('this.redirect',this.redirect)
            //   if (res.status == 1) {
            //     this.$message.error(res.msg);
            //     return
            //   }
            //   this.mdtuser = res.data;
            //   // 将对象转换为JSON字符串
            //   let jsonString = JSON.stringify(this.mdtuser);
            //   cookie.setCookie('user', jsonString);
            //   setToken(res.data.remember_token)
            //   commit('SET_USER', data)
            //   commit('SET_TOKEN', data.remember_token)
            //   commit('SET_NAME', data.username)
            //   // this.$router.push({ path: this.redirect || '/' })
            //   return this.$router.push('/dashboard');
            //   // return this.$router.push('/new/system/report/show');
            // })
            this.$store.dispatch('user/login', da).then((res) => {
              console.log('////////////////////////////',this.userInfo);
              this.$router.push({ path: this.redirect || '/' })
              // if(this.userInfo.adminRoles.id<3){
              //   console.log(this.redirect)
              //   this.$router.push({ path: this.redirect || '/' })
              //   // this.$router.push({ path: '/score/file' })
              //   console.log(this.redirect)
              //   this.loading = false
              // }else {
              //   this.$message({
              //     message: '请使用管理员账号登陆',
              //     type: 'warning'
              //   });
              // }

            }).catch(() => {
              this.loading = false
            })

          } else {
            return false;
          }
        });
      },
    },

    created() {

    },
    mounted() {
      console.log('in to  mounted');
      let cookieValue = cookie.getCookie("loginMsg");
      console.log(cookieValue);
      if (cookieValue) {
        let parsedObj = JSON.parse(cookieValue);
        console.log(parsedObj);  // 输出原始对象
        this.userData=parsedObj;

      }

    },
    beforeDestroy() {

    }



  }

</script>

<style>
  @import "../../base/base.css";

  .leftBox{
    width: 1200rem;
    height: 919rem;
    float: left;
    background: url("../../image/登录页图.png") center no-repeat;
    background-size: 100% 100%;
  }
  .rightBox{
    width: 720rem;
    height: 919rem;
    float: left;
  }
  .loginBox{
    width: 227rem;
    height: 80rem;
    background: url("../../image/logoB.png") center no-repeat;
    background-size: 100% 100%;
    margin-top: 140rem;
    margin-left: 247rem;
  }
  .textBox{
    /*width: 227rem;*/
    height: 32rem;
    text-align: center;
    margin-top: 18rem;
    font-size: 24rem;
    line-height: 32rem;
    color: #666666;
    margin-bottom: 50rem;
  }
  .inputBox{
    width: 450rem;
    height: 62rem;
    background: #ffffff;
    border: 1px solid #2175db;
    border-radius: 4px;
    margin: 0px auto;
    margin-top: 25rem;
  }
  .inputBoxIcon1{
    width: 28rem;
    height: 28rem;
    background: url("../../image/账号.png") center no-repeat;
    background-size: 100% 100%;
    margin-top: 15rem;
    margin-left: 15rem;
    float: left;
  }
  .inputBoxIcon2{
    width: 28rem;
    height: 28rem;
    background: url("../../image/密码.png") center no-repeat;
    background-size: 100% 100%;
    margin-top: 15rem;
    margin-left: 15rem;
    float: left;
  }
  .inputBox input{
    /*background-color: #1E9FFF;*/
    width: 400rem;
    height: 56rem;
  }
  .isBox{
    margin-top: 20rem;
    margin-left: 135rem;
    height: 35rem;

  }
  .textSpan{
    display: block;
    font-size: 16rem;
    line-height: 35rem;
    color: #666666;
    float: left;
    margin-left: 10rem;
  }
  .el-switch{
    float: left!important;
    margin-top: 8rem!important;
    width: 40rem!important;
    height: 20rem!important;
  }
  .modal-footer{
    width: 450rem;
    height: 62rem;

    margin: 0px auto;
    margin-top: 25rem;
  }
  .modal-footer button{
    width: 450rem;
    height: 62rem;
    background: #2175db;
    border: 1px solid #2175db;
    border-radius: 4px;
    color: white;
    font-size: 24px;
  }
  input{
    font-size: 20rem;
  }
</style>
